<template>
	<view class="container">
		<view class="header">
			<view class="avatar">
				<image :src="card.card_logo" />
			</view>
			<view class="name">
				{{card.card_nickname}}
			</view>
			<view class="job">
				{{card.card_job}}
			</view>
			<view class="company">
				{{card.card_company}}
			</view>
			<view class="list">
				<!-- <view class="item">
                    <image src="/static/images/like.png" />
                    <text>900</text>
                </view>

                <view class="item">
                    <image src="/static/images/visit.png" />
                    <text>900</text>
                </view>

                <view class="item">
                    <image src="/static/images/relay.png" />
                    <text>转发</text>
                </view> -->
			</view>
		</view>

		<view class="menu">
			<!-- 除了H5端，其他都显示 -->
			<!--  #ifndef  H5 -->
			<u-button type="default" :plain="true" text="同步通讯录" :customStyle="syncBtn" @click="AddConcat"></u-button>
			<u-button type="default" :plain="true" text="分享名片" :customStyle="relayBtn" open-type="share"></u-button>
			<!--  #endif -->
		</view>

		<view class="info">
			<view class="title">信息</view>

			<view class="list">
				<view class="item">
					<view class="content">
						<view class="name">手机</view>
						<view class="value">{{card.card_mobile}}</view>
					</view>
					<view class="icon">
						<image src="/static/images/tel.png" />
					</view>
				</view>

				<view class="item">
					<view class="content">
						<view class="name">邮箱</view>
						<view class="value">{{card.card_email}}</view>
					</view>
					<view class="icon">
						<image src="/static/images/email.png" />
					</view>
				</view>

				<view class="item">
					<view class="content">
						<view class="name">地址</view>
						<view class="value">{{card.card_address}}</view>
					</view>
					<view class="icon">
						<image src="/static/images/site.png" />
					</view>
				</view>
			</view>
		</view>
		<!-- 信息提示 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				syncBtn: {
					color: 'red',
					background: 'transparent',
					width: '40%',
					border: '1px solid red',
					fontSize: '14px'
				},
				relayBtn: {
					color: '#fff',
					background: 'red',
					width: '40%',
				},
				card: {}
			}
		},
		onLoad() {
			this.CardInfoData()
		},
		// 分享给好友
		onShareAppMessage() {
			return {
				title: this.card.card_company,
				path: '/pages/card/card',
				imageUrl: this.card.card_logo
			}
		},
		methods: {
			async CardInfoData() {
				let result = await this.$u.api.card()
				if (result.code == 1) {
					this.card = result.data
				}
			},
			AddConcat() {
				uni.addPhoneContact({
					photoFilePath: this.card.card_logo,
					nickName: this.card.card_nickname,
					firstName: this.card.card_nickname,
					mobilePhoneNumber: this.card.card_mobile,
					weChatNumber: this.card.card_mobile,
					organization: this.card.card_company,
					title: this.card.card_job,
					workAddressStreet: this.card.card_address,
					success: () => {
						this.$refs.uToast.show({
							type: 'success',
							message: '保存通讯录成功',
						})
					},
					fail: (error) => {
						console.log(error)
						this.$refs.uToast.show({
							type: 'error',
							message: `保存通讯录失败:${error.errMsg}`
						})
					}
				});

			}
		}
	}
</script>

<style>
	page {
		background-color: #eee;
	}

	.header {
		width: 95%;
		background-color: #fff;
		margin: 0 auto;
		border-radius: 10px;
		margin-top: 10px;
		padding: 20px 0;
		text-align: center;
		box-shadow: 0px 0px 10px 5px #dcdcdc;
	}

	.header .avatar {
		width: 80px;
		height: 80px;
		overflow: hidden;
		border-radius: 50%;
		margin: 0 auto;
	}

	.header .avatar image {
		width: 100%;
		height: 100%;
	}

	.header .name {
		margin-top: 12px;
		font-weight: bold;
		font-size: 18px;
	}

	.header .job {
		font-size: 12px;
		color: #949bae;
		margin: 10px 0;
	}

	.header .company {
		font-size: 12px;
		color: #949bae;
	}

	.header .list {
		display: flex;
		justify-content: space-between;
		margin-top: 20px;
	}

	.header .list .item {
		display: flex;
		flex-direction: column;
		width: 33%;
		justify-content: center;
	}

	.header .list .item image {
		width: 25px;
		height: 25px;
		margin: 0 auto;
	}

	.header .list .item text {
		font-size: 12px;
		color: #949bae;
		margin-top: 10px;
	}

	.menu {
		width: 95%;
		margin: 20px auto 0;
		display: flex;
		justify-content: space-around;
	}

	.info {
		width: 95%;
		margin: 20px auto 0;
		background-color: #fff;
		box-shadow: 0px 0px 10px 5px #dcdcdc;
		padding: 10px;
		box-sizing: border-box;
		border-radius: 10px;
	}

	.info .list {
		margin-top: 10px;
	}

	.info .list .item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 5px 0;
		color: #949bae;
	}


	.info .list .item .content {
		display: flex;
		font-size: 12px;
	}

	.info .list .item .name {
		display: flex;
		align-items: center;
	}

	.info .list .item .name::after {
		content: '';
		width: 1px;
		height: 10px;
		background-color: #949bae;
		display: block;
		margin: 0 5px;
	}

	.info .list .item .icon {
		width: 15px;
		height: 15px;
	}

	.info .item .icon image {
		width: 100%;
		height: 100%;
	}
</style>